<template>
  <div class="upform">
    <van-form @submit="onSubmit">
      <van-field
        left-icon="manager"
        v-model="mobile"
        name="mobile"
        label="用户名"
        placeholder="请输入手机号"
        :rules="rules.mobile"
      />
      <van-field
        v-model="password"
        left-icon="lock"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="rules.password"
      />
      <slot></slot>
      <div style="margin: 16px">
        <van-button
          :disabled="disabled"
          round
          block
          type="info"
          native-type="submit"
        >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'upform',
  data() {
    return {
      mobile: '',
      password: '',
      disabled: false,
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
        ],
        password: [
          { required: true, message: '密码不能为空' },
          {
            pattern: /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/,
            message: '密码必须由字母、数字组成，区分大小写,长度为8-18位'
          }
        ]
      }
    }
  },
  methods: {
    onSubmit(value) {
      this.$listeners.onSubmit(value)
    }
  }
}
</script>

<style lang="less" scoped></style>
